<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1.基本用法
         -->
        <p>{{ msg }}</p>
        <p>{{ msg2 }}</p>

        <button @click="show">点我</button>

        <!-- 对数据进行处理再显示 -->
        <p>{{ msg.toUpperCase().split(' ').reverse().join(' ') }}</p>
        <p>{{ reverseMsg }}</p>
        <button @click="msg='i love you'">修改msg的值</button>
        <hr>

        <!-- 
            2.get和set
         -->
        <p>{{ num }}</p>
        <p>{{ myNum }}</p>
        <button @click="myNum=8">修改myNum的值</button>
        <hr>

        <!-- 
            计算属性和方法的区别
                计算属性是基于它依赖的普通属性进行更新的，只有依赖的普通发生变化时才会更新变化
                计算属性是有缓存的，只要依赖的普通属性没有改变，多次访问时返回的是之前缓存的计算结果
         -->
        <p>{{ msg }}</p>
        <p>{{ randomMsg }}</p>
        <p>{{ randomMsg }}</p>
        <p>{{ randomMsg }}</p>
        <!-- <p>{{ randMsg() }}</p>
        <p>{{ randMsg() }}</p>
        <p>{{ randMsg() }}</p> -->
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{ // 普通属性
            msg:'weclome to vue',
            num:5
        },
        methods:{
            show: () => {
                console.log(this) // 如果使用的是箭头函数，此时this指向的是Window对象
            },
            randMsg(){
                console.log('方法ranMsg.....')
                return this.msg + Math.random()
            }
        },
        computed:{ // 计算属性
            msg2:function(){ // 该函数必须有返回值，用来获取属性，称为get函数
                console.log('获取msg2的值。。。。。')
                return 'hello world'
            },
            reverseMsg:function(){
               return this.msg.toUpperCase().split(' ').reverse().join(' ')
            },
            myNum:{ // 同时指定get和set，以对象的形式进行配置
                get:function(){
                    console.log('获取myNum....')
                    return this.num*2
                },
                set:function(val){
                    console.log('设置myNum....')
                    // this.myNum = val // 此处不能直接给myNum赋值，会出现死循环，导致栈溢出
                    this.num = val
                }
            },
            randomMsg(){
                console.log('计算属性randomMsg.....')
                return this.msg + Math.random()
            }

        }
    })
</script>
</html>